<template>
  <div class="graph-sys-content">
    <div class="header">
      <div class="header-text">
        构建系统
      </div>
      <div v-if="graphSysWidth < 400" class="toolbar">
        <a-tooltip placement="top" :mouse-enter-delay="0.5">
          <template slot="title">
            <span>工具栏</span>
          </template>
          <div>
            <a-button
              type="link"
              style="padding: 0;"
              :class="{
                'btn-select': showDetailMenu,
              }"
              @click="showDetailMenu = !showDetailMenu"
            >
              <a-icon-font
                class="tool-icon"
                type="iconxiangxixinxi"
              ></a-icon-font>
            </a-button>
          </div>
        </a-tooltip>
        <div
          v-if="showDetailMenu"
          class="detail-menu"
          :class="{ 'guest-mode': isLock }"
        >
          <div class="toolbar">
            <!-- 后续可以考虑抽一个组件 -->
            <div v-for="(tip, index) in functionList" :key="index">
              <div v-if="tip.tooltip === 'divider'" class="divider"></div>
              <a-tooltip v-else placement="top">
                <template slot="title">
                  <span>{{ tip.tooltip }}</span>
                </template>
                <div
                  class="btn function-btn-spacing"
                  :class="{
                    'btn-disabled':
                      tip.disabled || (isLock && tip.tooltip !== '预览'),
                    'btn-select': currentToolBarAction === tip.click,
                  }"
                  @click="clickFunction(tip.click)"
                >
                  <a-icon-font class="tool-icon" :type="tip.icon" />
                </div>
              </a-tooltip>
            </div>
            <filter-items
              ref="filter-items-toolbar"
              :disabled="isLock"
              :filter-content-visible="filterContentVisible"
              :checked-class-keys="checkedClassKeys"
              :checked-relation-keys="checkedRelationKeys"
              :graph-data="rawData"
              @on-check-filter-class="onCheckFilterClass"
              @on-check-filter-relation="onCheckFilterRelation"
              @on-filter-items="onFilterItems"
              @open-filter-content="openFilterContent"
              @close-filter-content="closeFilterContent"
            ></filter-items>

            <a-tooltip placement="top">
              <template slot="title">
                <span>复位</span>
              </template>
              <div
                class="btn function-btn-spacing"
                :class="{
                  'btn-disabled': isLock,
                  'btn-select': currentToolBarAction === 'gisRestoration',
                }"
                @click="clickFunction('gisRestoration')"
              >
                <a-icon-font class="tool-icon" type="iconhuidaohuabanbeifen3" />
              </div>
            </a-tooltip>
            <a-tooltip placement="top">
              <template slot="title">
                <span>搜索</span>
              </template>
              <div
                class="btn function-btn-spacing"
                :class="{
                  'btn-disabled': isLock,
                  'btn-select': currentToolBarAction === 'gisSearchVisible',
                }"
                @click="clickFunction('gisSearchVisible')"
              >
                <a-icon-font class="tool-icon" type="iconsousuo" />
              </div>
            </a-tooltip>
          </div>
        </div>
      </div>
      <div v-else class="toolbar" :class="{ 'guest-mode': isLock }">
        <!-- 后续可以考虑抽一个组件 -->
        <div v-for="(tip, index) in functionList" :key="index">
          <div v-if="tip.tooltip === 'divider'" class="divider"></div>
          <a-tooltip v-else placement="top">
            <template slot="title">
              <span>{{ tip.tooltip }}</span>
            </template>
            <div
              class="btn function-btn-spacing"
              :class="{
                'btn-disabled':
                  tip.disabled || (isLock && tip.tooltip !== '预览'),
                'btn-select': currentToolBarAction === tip.click,
              }"
              @click="clickFunction(tip.click)"
            >
              <a-icon-font class="tool-icon" :type="tip.icon" />
            </div>
          </a-tooltip>
        </div>
        <filter-items
          ref="filter-items"
          :disabled="isLock"
          :filter-content-visible="filterContentVisible"
          :checked-class-keys="checkedClassKeys"
          :checked-relation-keys="checkedRelationKeys"
          :graph-data="rawData"
          @on-check-filter-class="onCheckFilterClass"
          @on-check-filter-relation="onCheckFilterRelation"
          @on-filter-items="onFilterItems"
          @open-filter-content="openFilterContent"
          @close-filter-content="closeFilterContent"
        ></filter-items>

        <a-tooltip placement="top">
          <template slot="title">
            <span>复位</span>
          </template>
          <div
            class="btn function-btn-spacing"
            :class="{
              'btn-disabled': isLock,
              'btn-select': currentToolBarAction === 'gisRestoration',
            }"
            @click="clickFunction('gisRestoration')"
          >
            <a-icon-font class="tool-icon" type="iconhuidaohuabanbeifen3" />
          </div>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>搜索</span>
          </template>
          <div
            class="btn function-btn-spacing"
            :class="{
              'btn-disabled': isLock,
              'btn-select': currentToolBarAction === 'gisSearchVisible',
            }"
            @click="clickFunction('gisSearchVisible')"
          >
            <a-icon-font class="tool-icon" type="iconsousuo" />
          </div>
        </a-tooltip>
      </div>
    </div>
    <div class="map-gis-data" :style="{ height: 'calc(100% - 38px)' }">
      <!-- 图谱构建系统code here -->
      <!-- GIS -->
      <div
        class="gis-map-container"
        :style="{
          height: '100%',
        }"
      >
        <knowledge-gis-map
          ref="knowledgeGisMap"
          :id-name="'edit-map'"
          :collapse-tool="showDetailMenu"
          @save-board="onSave"
        ></knowledge-gis-map>
      </div>
    </div>

    <a-modal
      v-model="showPublishConfirm"
      ok-text="确定"
      cancel-text="取消"
      class="publish-confim-box"
      :closable="false"
      :body-style="{
        width: '490px',
      }"
      :confirm-loading="confirmLoading"
      @ok.stop="handleOk"
      @cancel.stop="terminatePublish"
    >
      <div>
        <h3>
          <a-icon-font
            type="iconjinggaodanchuang"
            class="warning-icon"
          ></a-icon-font>
          确定要发布吗？
        </h3>
        <div
          :style="{
            margin: 'auto 35px',
          }"
        >
          <p>发布后可与他人分享可视化</p>
          <p
            :style="{
              marginBottom: '0px',
            }"
          >
            查看权限限制
            <span class="warning-text"
              >(注意数据公开后，存在隐私泄露的风险)</span
            >
          </p>
          <a-radio-group
            v-model="publishAuthType"
            class="auth-group"
            @change="onSelectionChange"
          >
            <a-radio class="auth-select" :value="1">
              仅项目成员可见
            </a-radio>
            <a-radio class="auth-select" :value="2">
              部分人可见
            </a-radio>
            <a-select
              v-show="publishAuthType === 2"
              v-model="nameList"
              placeholder="请输入非本项目的用户名进行查询，可多选"
              class="name-selector"
              mode="multiple"
              @search="handleSearch"
              @change="handleChange"
            >
              <a-select-option
                v-for="option in userList"
                :key="option.id"
                :value="option.name"
              >
                {{ option.name }}
              </a-select-option>
            </a-select>
            <a-radio class="auth-select" :value="3">
              所有人可见
            </a-radio>
          </a-radio-group>
          <a-checkbox class="water-mark-check" @change="onChange">
            添加系统水印
          </a-checkbox>
        </div>
      </div>
    </a-modal>

    <a-modal v-model="publishModal" title="发布系统" :footer="null">
      <div class="copy-link-box">
        <p class="copy-link-text">{{ publishUrl }}</p>
        <div class="copy-link-btn" @click="handleCopyLink">复制链接</div>
      </div>
      <div class="text-under-copy">
        <span class="left-text">链接长期有效。</span>
        <a :href="publishUrl" target="_blank" class="right-text">打开链接</a>
      </div>
      <!-- <p>
        宽屏/VR版本访问地址：<a
          :href="`${publishUrl}?env=vr`"
          target="_blank"
          >{{ publishUrl + '?env=vr' }}</a
        >
      </p> -->
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import KnowledgeGisMap from '@/components/knowledge-gis/KnowledgeGisMap.vue'
import KGraphStore from '@/store/modules/k-graph'
import DataViewStore from '@/store/modules/dataview'
import { queryRoleByProjectId } from '@/api/home'
import { publicPath } from '@/api/constants'
import { cloneDeep, debounce } from 'lodash'
import { queryInfoByName } from '@/api/user'
import UserStore from '@/store/modules/user'
import { publishDashboard } from '@/api/dashboard'
import { buildSaveParameters } from '@/util/common'
import { saveWidget } from '@/api/widget'
import FilterItems from '@/components/knowledge-vis/FilterItems.vue'
import { queryKnowledgeGraph } from '@/api/knowledge-graph'

@Component({
  components: {
    KnowledgeGisMap,
    FilterItems,
  },
})
export default class GraphSysPanel extends Vue {
  @Prop({ type: Number }) visWidth!: number

  private publicPath = publicPath
  public publishToken: string = ''
  public publishModal: boolean = false
  /**
   * 是否添加水印
   */
  showWatermark: boolean = false

  showPublishConfirm: boolean = false
  public projectId: number | null = null // 项目 id
  //  项目协作者列表【包括自己】
  private coProjectList: Array<string> = []
  /**
   * 发布的权限类别
   * @type ‘1’- 仅自己可见 ‘2’- 部分人可见 ‘3’- 所有人可见
   */
  publishAuthType: number = 1

  // 模糊搜索 用户
  public userList: any[] = []

  //  selected id list
  private idList: Array<string> = []
  //  selected name list for clear Select Comp
  private nameList: Array<string> = []

  public functionList: any[] = [
    {
      tooltip: '发布',
      click: 'gisPublish',
      icon: 'icondaochu',
      disabled: false,
    },
    {
      tooltip: '预览',
      click: 'gisPreview',
      icon: 'iconicon-beifen3',
      disabled: false,
    },
    {
      tooltip: '保存',
      click: 'gisSave',
      icon: 'iconbaocun',
      disabled: false,
    },
    { tooltip: 'divider', click: '', icon: '' },
    {
      tooltip: '文本',
      click: 'gisText',
      icon: 'iconzujiandaohang-beifen3',
      disabled: false,
    },
    { tooltip: 'divider', click: '', icon: '' },
    {
      tooltip: '设置',
      click: 'nameSet',
      icon: 'iconzhanghaoshezhi',
      disabled: false,
    },
    {
      tooltip: '图层',
      click: 'gisLayer',
      icon: 'iconicon-gongneng-tuceng',
      disabled: false,
    },
    // {
    //   tooltip: '筛选',
    //   click: 'gisFilter',
    //   icon: 'iconshaixuan',
    //   disabled: false,
    // },
    // {
    //   tooltip: '复位',
    //   click: 'gisRestoration',
    //   icon: 'iconhuidaohuabanbeifen3',
    //   disabled: true,
    // },
    // {
    //   tooltip: '搜索',
    //   click: 'gisSearchVisible',
    //   icon: 'iconsousuo',
    //   disabled: false,
    // },
  ]

  public confirmLoading: boolean = false //  确认发布loading status

  public graphSysWidth: number = 500 //  构建系统面板宽度
  public showDetailMenu: boolean = false //  是否显示详细菜单
  //  filter start
  public filterContentVisible = false

  // 项目锁定
  public get isLock() {
    return DataViewStore.getLock
  }

  public get graphId() {
    return KGraphStore.graphId
  }

  public get searchInput() {
    return KGraphStore.searchInput
  }

  public get checkedClassKeys() {
    return KGraphStore.checkedClassKeys
  }

  public get checkedRelationKeys() {
    return KGraphStore.checkedRelationKeys
  }

  public get rawData() {
    return KGraphStore.filterRawData
  }

  @Watch('rawData', { immediate: true, deep: true })
  public handleRawData(newValue: any) {
    if (newValue?.filterItems?.class) {
      this.$nextTick(() => {
        const filterItems = this.$refs['filter-items'] as FilterItems
        filterItems.initFilterItems()
      })
    }
  }

  @Watch('visWidth', { immediate: true })
  public handleVisWidth() {
    this.$nextTick(() => {
      const target = document.querySelector('.graph-system') as HTMLElement
      this.graphSysWidth = target.clientWidth
    })
  }

  @Watch('graphSysWidth')
  public handleSysWidth() {
    this.changeSyssize()
  }

  public changeSyssize = debounce(() => {
    this._changeSyssize()
  }, 500)

  public _changeSyssize() {
    if (this.graphSysWidth >= 400 && this.rawData.filterItems?.class) {
      this.$nextTick(() => {
        const filterItems = this.$refs['filter-items'] as FilterItems
        filterItems.initFilterItems()
      })

      this.showDetailMenu = false
    }
  }

  @Watch('showDetailMenu')
  public handleDetailMenu(newValue: boolean) {
    if (newValue) {
      this.$nextTick(() => {
        const filterItemsTool = this.$refs[
          'filter-items-toolbar'
        ] as FilterItems
        filterItemsTool.initFilterItems()
      })
    }
  }

  public onCheckFilterClass(checkedKeys: any) {
    KGraphStore.setClassKeys(checkedKeys)
  }

  public onCheckFilterRelation(checkedKeys: any) {
    KGraphStore.setRelationKeys(checkedKeys)
  }

  public async onFilterItems() {
    const response = await queryKnowledgeGraph({
      data: {
        projectId: this.projectId,
        id: this.graphId,
        withClass: this.checkedClassKeys,
        hasRelation: this.checkedRelationKeys,
        searchInput: this.searchInput,
      },
    })
    if (response.data.code === 100) {
      //  update dashboard info
      KGraphStore.setUpdateGisMapTime()
      this.closeFilterContent()
      const responseData = response.data.result
      if (this.checkedRelationKeys.length === 0) {
        responseData.edges = []
      }

      KGraphStore.setReloadGraph(responseData)
    }
  }

  public openFilterContent() {
    // if (this.isLoadGraphData) {
    this.filterContentVisible = !this.filterContentVisible
    //  close other func box
    KGraphStore.setCurrentToolBarAction(null)
    // }
  }

  public closeFilterContent() {
    this.filterContentVisible = false
  }

  public async mounted() {
    this.projectId = Number(this.$route.params.id)
  }

  public get publishUrl(): string {
    const { protocol, host } = window.location
    return `${protocol}//${host}/KGpublish/${this.publishToken}`
  }

  public handleCopyLink() {
    navigator.clipboard.writeText(this.publishUrl).then(
      () => {
        this.$message.success('发布链接复制成功')
      },
      (error: any) => {
        this.$message.error(error)
      }
    )
  }

  private onChange(event: any) {
    this.showWatermark = event.target.checked
  }

  /**
   * 当前 激活的工具栏项
   */
  public get currentToolBarAction() {
    return KGraphStore.currentToolBarAction
  }

  // 多个功能 统一点击入口
  public clickFunction(click: any) {
    if (this.isLock && click !== 'gisPreview') {
      return
    }
    //  set focus box
    KGraphStore.setFocusBoxg('sys')

    const knowledgeGisMap: any = this.$refs.knowledgeGisMap as Vue
    // knowledgeGisMap.clearSelectedState() // 清除选中的要素
    this.closeFilterContent() //  close filter window by default

    // const { click } = action
    if (click === 'gisPublish') {
      this.onPublish()
      return
    }
    if (click === 'gisPreview') {
      this.onPreview()
      return
    }
    if (click === 'gisText') {
      console.log('text')
      KGraphStore.setCurrentToolBarAction(null)
      this.onTextAdd()
      return
    }
    if (click === 'gisSave') {
      this.onSave()
      return
    }
    if (click === 'gisRestoration') {
      knowledgeGisMap.resetMap()
    } else if (this.currentToolBarAction === click) {
      KGraphStore.setCurrentToolBarAction(null)
    } else {
      KGraphStore.setCurrentToolBarAction(click)
    }
  }
  //  完善里面的条件
  public onPublish(): void {
    // if (this.isVisitorAndDev) {
    //   return
    // }
    const { dashboardId } = KGraphStore
    if (!dashboardId) {
      return
    }
    // // 屏蔽没有组件的情况
    // if (VisualizationStore.gridList.length === 0) {
    //   this.$message.error('面板不存在组件')
    //   return
    // }
    // 先保存，在发布，排除发布后空白页的问题
    // const visualizationContent = VisualizationStore.VisualizationContent as any
    this.onSave()
    // if (
    //   visualizationContent &&
    //   typeof visualizationContent.onSave === 'function'
    // ) {
    this.showPublishConfirm = true
    //  获取协作者列表
    this.getCoProjectList()
    // visualizationContent.onSave(true)
    // }
  }

  private async getRoleByProjectId() {
    const postData = {
      projectId: this.projectId,
    }
    const responseRole = await queryRoleByProjectId({ data: postData })
    return responseRole.data.result
  }

  private async getCoProjectList() {
    const list = await this.getRoleByProjectId()
    const result: any = []
    list.forEach((item: any) => {
      result.push(item.userId)
    })
    this.coProjectList = result
  }

  async onTextAdd() {
    // if (KGraphStore.textList.length > 0) {
    //   this.$message.info('文本组件已存在')
    //   return
    // }
    const itemId = `text${Math.random().toString(36).slice(-8)}`
    const configuration: any = {
      chartOptions: {
        chartType: 'text',
        value: '',
        // title: '文本1',
        // showBorder: true,
        // showTitle: true,
      },
      chartType: 'text',
      width: '600px',
      height: '100px',
      top: '0px',
      right: '100px',
      i: itemId,
      resizable: true,
      moved: true,
      widgetType: 'system',
    }

    const parameters = buildSaveParameters(configuration)
    if (KGraphStore.dashboardId) {
      parameters.data.dashboardId = KGraphStore.dashboardId
    }
    const response: any = await saveWidget(parameters) // 保存configuration widget
    configuration.widgetId = response.data.result

    KGraphStore.addDashboardText(configuration)

    setTimeout(() => {
      // VisualizationStore.setActiveSettingItem('text')
      // VisualizationStore.fetchFormulaList({
      //   projectId: Number(this.$route.params.id),
      // })

      // VisualizationStore.setCurrentGridItem(
      //   this.gridList[this.gridList.length - 1]
      // )
      this.onSave()
    }, 100)
  }

  /**
   * 预览
   */
  onPreview() {
    KGraphStore.changeVisualizationMode('preview')
    this.clearFixedLayer()
  }

  //  清除常驻图层，并且清空store中存储的常驻图层id
  public clearFixedLayer() {
    const knowledgeGisMap: any = this.$refs.knowledgeGisMap as Vue
    const { fixedLayerId } = KGraphStore

    if (fixedLayerId.length > 0) {
      // eslint-disable-next-line no-restricted-syntax
      for (const layerId of fixedLayerId) {
        knowledgeGisMap.removeFixedLineLayer(layerId)
      }
      KGraphStore.emptyFixedLayerId()
    }
  }

  /**
   * 保存更新
   */
  public async onSave() {
    const response: any = await KGraphStore.updateDashboard()
    if (response.status === 200 && response.data.code === 100) {
      this.$message.success('保存成功')
    } else {
      this.$message.error(response.message)
    }
  }

  public openGraphLayer() {
    //  TODO
  }

  private getVisitorId() {
    let result: any
    const idListCopy: any = cloneDeep(this.idList)
    switch (this.publishAuthType) {
      case 1:
        result = this.coProjectList.join(',') //  need to add co-worker id
        break
      case 2:
        idListCopy.push(this.coProjectList) //  need to add co-worker id
        result = idListCopy.join(',')
        break
      case 3:
        result = '-1'
        break
      default:
        break
    }

    return result
  }

  private onSelectionChange(event: any) {
    this.publishAuthType = event.target.value
  }
  // 关键字 模糊搜索用户
  public handleSearch(searchKey: string) {
    if (searchKey.trim().length >= 2) {
      this.queryUsersByName(searchKey.trim())
    }
  }

  private queryUsersByName = debounce(
    (searchKey: string) => this._handleSearch(searchKey),
    100
  )

  public _handleSearch(searchKey: string) {
    const parameters = {
      name: searchKey,
    }
    queryInfoByName({ data: parameters })?.then((response: any) => {
      if (response.data.code === 100) {
        // 去掉自己
        const filterUsers = response.data.result.filter(
          (user: any) => user.id !== UserStore.currentUser?.id
        )
        this.userList = filterUsers
      }
    })
  }

  //  处理多选框的选择
  public handleChange(value: any, options: any) {
    const result: any = []
    options.forEach((item: any) => {
      result.push(item.key)
    })
    this.idList = result
  }

  private async handleOk() {
    const { dashboardId } = KGraphStore
    console.log(dashboardId)
    // const configurationWidget = VisualizationStore.gridList.filter(
    //   (gridItem) => gridItem.chartType === 'configuration'
    // )
    this.confirmLoading = true

    const response = await publishDashboard({
      data: {
        projectId: this.projectId,
        id: dashboardId,
        // isComplex: true,
        // pipelineId: configurationWidget[0]
        //   ? configurationWidget[0].chartOptions.pipelineId
        //   : '',
        showWatermark: this.showWatermark,
        name: 'test',
        visitorIds: this.getVisitorId(),
      },
    })

    console.log(response, 'okok')

    if (response.data.code === 100 && response.data.success) {
      this.publishToken = response.data.result
      this.terminatePublish()
      this.publishModal = true
      // this.cancelPublishFlag = false
      // const d = new Date()
      // this.localPublishTime = `${d.getFullYear()}年${
      //   d.getMonth() + 1
      // }月${d.getDate()}日`

      //  设置发布时间
      // const index = this.sysTabs.findIndex(
      //   (item: any) => item.id === this.currentTabId
      // )
      // if (index > 0) {
      //   this.$set(this.sysTabs[index], 'publishTime', new Date().toISOString())
      // }
    } else {
      this.$message.error(response.data.tips)
    }
    this.confirmLoading = false
  }

  private terminatePublish() {
    this.showPublishConfirm = false
    this.publishAuthType = 1
    this.userList = []
    this.idList = []
    this.nameList = []
  }
}
</script>

<style lang="less" scoped>
.graph-sys-content {
  .header {
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;

    .header-text {
      color: #5d637e;
      font-weight: 500;
      letter-spacing: 1px;
      margin: auto 0;
    }

    .toolbar {
      background-color: #fff;
      display: flex;
      flex-direction: row-reverse;
      height: 38px;
      line-height: 38px;
      position: relative;
      transition: width 0.2s ease;
      vertical-align: middle;
      z-index: 1;

      .tool-icon {
        cursor: pointer;
        font-size: 16px;
        height: 26px;
        margin: 0 2px;
        padding: 4px;

        &:hover {
          background-color: #f1f1f1;
          color: #5561ff !important;
        }
      }

      .btn-select {
        background-color: rgba(105, 115, 255, 0.1);
        color: #6973ff;
      }

      .detail-menu {
        border-radius: 2px;
        box-shadow: 0 0 4px 0 rgba(88, 98, 230, 0.2);
        position: absolute;
        top: 38px;
      }

      .divider {
        background: #999;
        height: 14px;
        margin: 10px 8px;
        width: 1px;
      }
    }

    .map-gis-data {
      display: flex;
      flex-direction: column;

      .gis-map-container {
        background: #fff;
      }
    }
  }

  .guest-mode {
    user-select: none;

    .btn-disabled .tool-icon {
      cursor: not-allowed;
      opacity: 0.45;
    }

    /deep/ .ant-btn {
      cursor: not-allowed;
      opacity: 0.45;
    }
  }
}

.auth-group {
  margin-bottom: 25px;
  padding-left: 20px;
  width: 80%;

  .auth-select {
    display: block;
    height: 30px;
    line-height: 30px;
  }

  .name-selector {
    margin: 10px auto;
    width: 100%;
  }
}

.publish-confim-box /deep/ .ant-modal-body {
  padding: 32px 32px 24px;
}

.warning-icon {
  font-size: 20px;
  margin-right: 10px;
}

.warning-text {
  color: #e6505a;
}

.copy-link-box {
  display: flex;

  .copy-link-text {
    background: #f9f9fc;
    border: 1px solid #e8e8e8;
    border-radius: 2px 0 0 2px;
    color: #5d637e;
    flex: 1;
    font-size: 14px;
    height: 32px;
    line-height: 20px;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 6px 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .copy-link-btn {
    align-items: center;
    background: #6973ff;
    border-radius: 0 4px 4px 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 300;
    height: 32px;
    justify-content: center;
    width: 88px;
  }
}

.text-under-copy {
  display: flex;
  justify-content: space-between;

  .left-text {
    color: #222432;
    font-size: 12px;
    height: 17px;
    opacity: 0.5;
  }

  .right-text {
    color: #6973ff;
    font-size: 12px;
    height: 17px;
  }
}
</style>
